list-group-item disabled
bootstrap5.css
bootstrap5.css
.list-group-item.disabled,
.list-group-item:disabled {
color: #6c757d;
pointer-events: none;
background-color: #fff;
}
html bootstrap5 Sample
リスト項目を無効状態にする:disabled
- リスト項目1
- リスト項目2
- リスト項目3
<ul class="list-group">
<li class="list-group-item disabled">リスト項目1</li>
<li class="list-group-item">リスト項目2</li>
<li class="list-group-item">リスト項目3</li>
</ul>
divとaタグでリストグループ:list-groupとlist-group-item
<!-- サイドメニューでリンクさせる -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
<a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
<a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
</div>
ボタンのリストグループ:list-group-item-action
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
<button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
<button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
</div>